<template>
	<div style="width: 16.8rem;">
		<!-- title -->
		<div class="flex" style="margin-left: 0.6rem;margin-right: 0.6rem;margin-top: 1.25rem;">
			<img class="page-dom-title-img" src="@/assets/images/station-on.png">
			<div class="page-title-name-sw"
				style="font-size: 1.25rem;margin-left: 1rem; width: calc(100% - 2.5rem);position: relative;">
				<div style="position: absolute;bottom: 0;white-space: nowrap;overflow: hidden;width: 100%;">
					<span style="margin-right: 1rem;">新疆轮台台站</span>
					<span class="sw-room-num">3000个机房</span>
				</div>
			</div>
		</div>
		<!-- 传感器 -->
		<div style="margin: 0.5rem 2.5rem;overflow: hidden;">
			<div class="sensor-item"> <img class="sensor-img" src="@/assets/images/humidity.png">湿度:100hPa </div>
			<div class="sensor-item"> <img class="sensor-img" src="@/assets/images/air.png">气压: </div>
			<div class="sensor-item"> <img class="sensor-img" src="@/assets/images/wind.png">风速:100m/s </div>
			<div class="sensor-item"> <img class="sensor-img" src="@/assets/images/warm.png">温度: </div>
			<div class="sensor-item"> <img class="sensor-img" src="@/assets/images/water.png">雨量: </div>
			<div class="sensor-item"> <img class="sensor-img" src="@/assets/images/weathervane.png">风向:西北风 </div>
			<div class="sensor-item"> <img class="sensor-img" src="@/assets/images/wind-power.png">风力:100级 </div>
		</div>
		<!-- 摄像头 -->
		<div>
			<sw-video style="width: 14rem;height: 7.5rem;margin: 0.4rem 1.5rem;" v-for="video, index in videoList"
				:url="video.url" :name="video.name" :key="video.name" v-show="index < showNum"
				@fullscreen="fullscreenChange"></sw-video>
		</div>
		<!-- 天线 -->
		<div style="margin-top: 1rem;">
			<div class="mast-item" v-for="item in mastList">
				<img class="mast-img" src="@/assets/images/mast.png">
				<div style="width: 7rem;overflow: hidden;">{{ item.name }}</div>
				<div class="compass-item">
					<img class="compass-img" src="@/assets/images/compass-img.png">
					<span>{{ item.warm }}°C</span>
				</div>
				<div style="margin-left: 0.3rem;">{{ item.status }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import swVideo from './sw-video.vue';

export default {
	name: "room_head",
	components: { swVideo },
	data() {
		return {
			// 是否开启全屏
			isFull: false,
			// 能显示多少
			showNum: 3,
			// 起始索引
			startIndex: 0,
			// 循环间隔
			step: 5000,
			// 是否开启了全屏
			isFullscreen: false,
			// 循环函数
			interval: null,
			// 视频列表
			videoListAll: [
				{ url: 'http://192.168.1.107:8090/youyang/102/hls.m3u8', name: '酉阳机房xx' },
				{ url: 'http://192.168.1.107:8090/wanzhou/102/hls.m3u8', name: '万州机房-2' },
				{ url: 'http://192.168.1.107:8090/rongchang/102/hls.m3u8', name: '荣昌机房-3' },
				{ url: 'http://192.168.1.107:8090/qijiang/702/hls.m3u8', name: '綦江机房' },
				{ url: 'http://192.168.1.107:8090/rongchang/202/hls.m3u8', name: '荣昌机房-4' },
				{ url: 'http://192.168.1.107:8090/rongchang/202/hls.m3u8', name: '荣昌机房-42' },
				{ url: 'http://192.168.1.107:8090/rongchang/202/hls.m3u8', name: '荣昌机房-43' },
			],
			// 天线数量
			mastListAll: [
				{ name: '旋转对数周期天线1', status: '在线', warm: 1 },
				{ name: '旋转对数周期天线2', status: '在线', warm: 2 },
				{ name: '旋转对数周期天线3', status: '离线', warm: 3 },
				{ name: '旋转对数周期天线4', status: '在线', warm: 4 },
				{ name: '旋转对数周期天线5', status: '在线', warm: 5 },
				{ name: '旋转对数周期天线6', status: '在线', warm: 6 },
				{ name: '旋转对数周期天线1', status: '在线', warm: 7 },
				{ name: '旋转对数周期天线2', status: '在线', warm: 8 },
				{ name: '旋转对数周期天线3', status: '离线', warm: 9 },
				{ name: '旋转对数周期天线4', status: '在线', warm: 10 },
				{ name: '旋转对数周期天线1', status: '在线', warm: 11 },
				{ name: '旋转对数周期天线2', status: '在线', warm: 12 },
				{ name: '旋转对数周期天线3', status: '离线', warm: 13 },
				{ name: '旋转对数周期天线4', status: '在线', warm: 14 },
				{ name: '旋转对数周期天线5', status: '在线', warm: 15 },
				{ name: '旋转对数周期天线6', status: '在线', warm: 16 },
				{ name: '旋转对数周期天线1', status: '在线', warm: 17 },
				{ name: '旋转对数周期天线2', status: '在线', warm: 18 },
				{ name: '旋转对数周期天线3', status: '离线', warm: 19 },
				{ name: '旋转对数周期天线4', status: '在线', warm: 20 },
				{ name: '旋转对数周期天线1', status: '在线', warm: 21 },
				{ name: '旋转对数周期天线2', status: '在线', warm: 22 },
				{ name: '旋转对数周期天线3', status: '离线', warm: 23 },
				{ name: '旋转对数周期天线4', status: '在线', warm: 24 },
				{ name: '旋转对数周期天线5', status: '在线', warm: 25 },
				{ name: '旋转对数周期天线6', status: '在线', warm: 26 },
				{ name: '旋转对数周期天线1', status: '在线', warm: 27 },
				{ name: '旋转对数周期天线2', status: '在线', warm: 28 },
				{ name: '旋转对数周期天线3', status: '离线', warm: 29 },
			],
			// 天线起始索引
			mastStartIndex: 0,
			// 天线显示的个数
			mastShowNum: 3,
			// 天线滚动函数
			intervalMast: null,
			// 循环间隔
			stepMast: 2000,
		};
	},
	watch: {
		// 存在全屏的视频则停止滚动
		isFullscreen(val) {
			if (val) {
				if (this.interval) clearInterval(this.interval);
			} else {
				this.start()
			}
		},
	},
	computed: {
		videoList() {
			let startList = [];
			let endList = []
			if (this.videoListAll && this.videoListAll.length > 0) {
				for (let i in this.videoListAll) {
					if (i < this.startIndex) {
						endList.push(this.videoListAll[i])
					} else {
						startList.push(this.videoListAll[i])
					}
				}
			}
			let list = startList.concat(endList);
			return list.splice(0, this.showNum + 2) || [];
		},
		// 显示的天线
		mastList() {
			let startList = [];
			let endList = []
			if (this.mastListAll && this.mastListAll.length > 0) {
				for (let i in this.mastListAll) {
					if (i < this.mastStartIndex) {
						endList.push(this.mastListAll[i])
					} else {
						startList.push(this.mastListAll[i])
					}
				}
			}
			let list = startList.concat(endList);
			return list.splice(0, this.mastShowNum) || [];
		}
	},
	created() {
		this.init();
		// 适配分辨率
		window.addEventListener('resize', () => this.init())
	},
	mounted() {
		this.$nextTick(() => {
			try {
				if (this.showNum < this.videoListAll.length) this.start()
			} catch (e) { console.log('计算出错', this.id) }

		})
	},
	methods: {
		init() {
			// 10rem
			let innerWidth = window.innerWidth;
			let innerHeight = window.innerHeight;
			let domH = 2.5; // 每行高度为2.5rem
			let rem = (innerWidth / 1920) * 20;
			let titleHeight=0;
			if (this.videoListAll.length < 3) {
				titleHeight = rem * (17.5 + (7.5 * this.videoListAll.length));
			} else {
				titleHeight = rem * (17.5 + (7.5 * 3));
			}
			let heith = innerHeight - titleHeight
			this.mastShowNum = Math.ceil(heith / (rem * domH));
			this.startMast()
		},
		// 开始循环
		start() {
			if (this.interval) clearInterval(this.interval);
			this.interval = setInterval(() => {
				if (this.videoListAll && this.videoListAll.length > 0) {
					if (this.startIndex < this.videoListAll.length - 1) {
						this.startIndex++
					} else {
						this.startIndex = 0
					}
				}
			}, this.step)
		},
		// 开始循环天线显示
		startMast() {
			if (this.intervalMast) clearInterval(this.intervalMast);
			this.intervalMast = setInterval(() => {
				if (this.mastListAll && this.mastListAll.length > 0) {
					if (this.mastStartIndex < this.mastListAll.length - 1) {
						this.mastStartIndex++
					} else {
						this.mastStartIndex = 0
					}
				}
			}, this.stepMast)
		},
		// 是否开启了全屏
		fullscreenChange(isFullscreen) {
			this.isFullscreen = isFullscreen;
		},
	},
	beforeDestroy() {
		window.removeEventListener('resize', () => this.init())
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
